<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  
  
  
  
  

  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name=generator content="Zola v0.19.2">

  
    <meta name="description" content="Discover Mermaid&#x27;s Markdown-inspired syntax to craft diverse diagrams using simple text in your blog posts. Learn how to integrate and customize Mermaid diagrams.">
  

  <title>Zolarwind</title>
  <link rel="stylesheet" href="/css/generated.css">
  
    <link rel="icon" href="&#x2F;img&#x2F;yin-yang.svg" />
  

  
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
    <link rel="alternate" type="application/atom+xml" title="Atom Feed for https://atomgit.com/deng-2022/games-zola/" href="/atom.xml" />
=======
    <link rel="alternate" type="application/atom+xml" title="Atom Feed for https://atomgit.com/deng-2022/games-zola" href="/atom.xml" />
>>>>>>> 88a22dfe7c2ae7ea9585d788af01d772a42c77e8
=======
    <link rel="alternate" type="application/atom+xml" title="Atom Feed for https://deng-2022.atomgit.com/games-zola" href="/atom.xml" />
>>>>>>> ac12026 (third commit)
=======
    <link rel="alternate" type="application/atom+xml" title="Atom Feed for https://deng-2022.atomgit.net/games-zola" href="/atom.xml" />
>>>>>>> b45cb8d (four commit)
  

  <script defer src="/js/zolarwind/logic.js" integrity="sha384-GYtsrgYVRYoxdEL+C+79KROm+MCl1ArSzQnqVnPTV78UNz5a1vFxAEiKbobXhQlw"></script>
  
  
    <script defer src="/js/diagram/mermaid.min.js" integrity="sha384-6YRSKOSMk3x6Bn7ihZ903Mt9EwSxoy5KrU1CkzT3d+j0C/qKp0DFgG4lKsnqH1Nm"></script>
    <script defer src="/js/diagram/mermaid-config.js" integrity="sha384-a2dvU77ShDwnty4gFDSjoOf0XwhvkFWC40MdpQWNfbFljoJNaGFYCpamXrQqClO1"></script>
  
</head>
<body>
  

  


<header class="sticky top-0 w-full z-10">
  <nav class="bg-gray-600">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <a href="/" aria-label="Go to homepage">
              <div class="h-8 w-8 text-gray-200 hover:text-white fill-current">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                  <path d="M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </a>
          </div>
          <div class="hidden md:block">
            <div class="ml-8 flex items-baseline">
              
                
                  
                    <a class="px-3 py-2 ml-2 rounded-md font-medium text-gray-200 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-600" href="/pages/imprint/" title="Imprint">Imprint</a>
                  
                
                  
                    <a class="px-3 py-2 ml-2 rounded-md font-medium text-gray-200 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-600" href="/pages/about/" title="About">About</a>
                  
                
              
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <button id="toggleMobileMenu" class="icon inline-flex items-center justify-center p-2 rounded-md text-gray-200 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white" aria-label="Menu">
            <span id="mobile-icon-menu-unselected">
              <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </span>
            <span id="mobile-icon-menu-selected" class="hidden">
              <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    
      <div id="mobile-menu" class="hidden md:hidden px-2 pt-2 pb-3 sm:px-3">
        
          
            <a class="mt-1 block px-3 py-2 rounded-md font-medium text-gray-200 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-600" href="/pages/imprint/" title="Imprint">Imprint</a>
          
        
          
            <a class="mt-1 block px-3 py-2 rounded-md font-medium text-gray-200 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-600" href="/pages/about/" title="About">About</a>
          
        
      </div>
    
  </nav>
</header>

  <div id="content">
    

  

  <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
    <article class="prose">
      <div class="h-48 rounded-md shadow-md">
        <img class="h-48 w-full object-cover" src="banner.jpg" alt="Diagrams with Mermaid">
      </div>
      <h1>Diagrams with Mermaid</h1>
      <div>
        <p>
          <span class="mr-2 text-sm">
            <time datetime="2023-09-26">September 26, 2023</time> &middot;
            460 words &middot;
            3 minutes reading time
          </span>
          <span class="text-sm leading-5 font-medium text-indigo-600">

  
    
<<<<<<< HEAD
<<<<<<< HEAD
      <span class="mr-2 badge badge-green"><a href="https://atomgit.com/deng-2022/games-zola/tags/diagram/">diagram</a></span>
=======
      <span class="mr-2 badge badge-green"><a href="https://deng-2022.atomgit.com/games-zola/tags/diagram/">diagram</a></span>
>>>>>>> ac12026 (third commit)
=======
      <span class="mr-2 badge badge-green"><a href="https://deng-2022.atomgit.net/games-zola/tags/diagram/">diagram</a></span>
>>>>>>> b45cb8d (four commit)
    
  

</span>

        </p>
      </div>

      <div>
        <h2 id="what-are-mermaid-diagrams">What are Mermaid diagrams</h2>
<p><a href="https://mermaid.js.org">Mermaid</a> is a syntax similar to Markdown where you can use text to describe and automatically generate diagrams.
With Mermaid, you can generate
<a href="https://mermaid.js.org/syntax/flowchart.html">Flow charts</a>,
<a href="https://mermaid.js.org/syntax/classDiagram.html">UML diagrams</a>,
<a href="https://mermaid.js.org/syntax/pie.html">Pie charts</a>,
<a href="https://mermaid.js.org/syntax/gantt.html">Gantt diagrams</a>,
<a href="https://mermaid.js.org/syntax/entityRelationshipDiagram.html">Entity Relationship diagrams</a>,
and more.</p>
<h2 id="an-entity-relationship-diagram-example">An Entity Relationship diagram example</h2>
<pre class="mermaid">
  
    %%{ init: {'theme': 'forest'} }%%
  
  erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINEITEM : contains
    PRODUCT ||--o{ LINEITEM : is_listed_in
    CUSTOMER {
        string Name
        string Email
        string Address
    }
    PRODUCT {
        string ProductName
        float Price
    }
    ORDER {
        date DateOrdered
        string Status
    }
    LINEITEM {
        int Quantity
    }
</pre>
<h2 id="using-mermaid-in-your-blog-post">Using Mermaid in your blog post</h2>
<p>The diagram shortcode allows you to easily embed Mermaid diagrams in your blog posts, with an option to configure its appearance.</p>
<h3 id="basic-usage">Basic Usage</h3>
<p>To use the shortcode in your blog post, you would use the following format:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#8cdaff;">diagram</span><span>() </span><span style="color:#ff5e5e;">%</span><span>​}
</span><span style="color:#e9fdac;">Your Mermaid diagram code here
</span><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#e9fdac;">end </span><span style="color:#ff5e5e;">%</span><span>​}
</span></code></pre>
<p>Replace <em>Your Mermaid diagram code here</em> with your actual Mermaid diagram code.</p>
<p>To load the necessary JavaScript to render the Mermaid diagram, you need to enable it in the front matter of your blog post by setting the value for <code>extra.diagram</code> to <code>true</code>:</p>
<pre data-lang="ini" style="background-color:#191919;color:#f8f8f2;" class="language-ini "><code class="language-ini" data-lang="ini"><span style="color:#ff5e5e;">+++
</span><span style="font-style:italic;color:#fbdfb5;">[extra]
</span><span style="font-style:italic;color:#fc9354;">diagram </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">true
</span><span style="color:#ff5e5e;">+++
</span></code></pre>
<h3 id="configuring-the-appearance">Configuring the Appearance</h3>
<p>The shortcode supports an optional <code>init</code> parameter, that allows you to specify configuration options for Mermaid,
particularly changing the appearance of the diagrams through the theme.</p>
<p>For example, to apply the <code>forest</code> theme:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#8cdaff;">diagram</span><span>(</span><span style="color:#e9fdac;">init</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">&quot;</span><span style="color:#fbe3bf;">{&#39;theme&#39;: &#39;forest&#39;}</span><span style="color:#ffffff;">&quot;</span><span>) </span><span style="color:#ff5e5e;">%</span><span>​}
</span><span style="color:#e9fdac;">Your Mermaid diagram code here
</span><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#e9fdac;">end </span><span style="color:#ff5e5e;">%</span><span>​}
</span></code></pre>
<h3 id="providing-init-configuration">Providing init Configuration</h3>
<p>When using the <code>init</code> parameter, the configuration should be a string wrapped in double quotes.
Inside this string, use single quotes for keys and values.</p>
<p>Here's a more advanced example with multiple configuration options:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#8cdaff;">diagram</span><span>(</span><span style="color:#e9fdac;">init</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">&quot;</span><span style="color:#fbe3bf;">{&#39;theme&#39;: &#39;forest&#39;, &#39;themeVariables&#39;: {&#39;primaryColor&#39;: &#39;#FF0000&#39;}}</span><span style="color:#ffffff;">&quot;</span><span>) </span><span style="color:#ff5e5e;">%</span><span>​}
</span><span style="color:#e9fdac;">Your Mermaid diagram code here
</span><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#e9fdac;">end </span><span style="color:#ff5e5e;">%</span><span>​}
</span></code></pre>
<p>In this example, we're using the <code>forest</code> theme and changing the primary color to red (<code>#FF0000</code>).</p>
<p><strong>Note</strong>: Ensure that you use single quotes inside the double quotes for the configuration to work correctly.</p>
<h3 id="putting-it-all-together">Putting it all together</h3>
<p>Use the shortcode by enclosing your Mermaid diagram code with <code>{​% diagram() %​} ... {+ end %}</code>.
To change the look of the Mermaid theme, provide values for the init parameter.
Always enclose the init value with double quotes, and use single quotes inside the configuration string.
With this shortcode in place, integrating and customizing Mermaid diagrams in your blog posts becomes a breeze!</p>
<h2 id="explaining-mermaid-diagram-code">Explaining Mermaid diagram code</h2>
<p>Here is how the diagram rendered above is embedded in this blog post as a code block.
Because it is the same code as the diagram above, extra care has to be taken to prevent Mermaid from rendering it as a diagram.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#8cdaff;">diagram</span><span>(</span><span style="color:#e9fdac;">init</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">&quot;</span><span style="color:#fbe3bf;">{&#39;theme&#39;: &#39;forest&#39;}</span><span style="color:#ffffff;">&quot;</span><span>) </span><span style="color:#ff5e5e;">%</span><span>​}
</span><span>    </span><span style="color:#e9fdac;">CUSTOMER </span><span style="color:#ff5e5e;">||--</span><span style="color:#e9fdac;">o</span><span>{ ORDER : </span><span style="color:#e9fdac;">places
</span><span>    </span><span style="color:#e9fdac;">ORDER </span><span style="color:#ff5e5e;">||--|</span><span>{ LINEITEM : </span><span style="color:#e9fdac;">contains
</span><span>    </span><span style="color:#e9fdac;">PRODUCT </span><span style="color:#ff5e5e;">||--</span><span style="color:#e9fdac;">o</span><span>{ LINEITEM : </span><span style="color:#e9fdac;">is_listed_in
</span><span>    </span><span style="color:#e9fdac;">CUSTOMER </span><span>{
</span><span>        </span><span style="color:#e9fdac;">string Name
</span><span>        </span><span style="color:#e9fdac;">string Email
</span><span>        </span><span style="color:#e9fdac;">string Address
</span><span>    }
</span><span>    </span><span style="color:#e9fdac;">PRODUCT </span><span>{
</span><span>        </span><span style="color:#e9fdac;">string ProductName
</span><span>        </span><span style="color:#e9fdac;">float Price
</span><span>    }
</span><span>    </span><span style="color:#e9fdac;">ORDER </span><span>{
</span><span>        </span><span style="color:#e9fdac;">date DateOrdered
</span><span>        </span><span style="color:#e9fdac;">string Status
</span><span>    }
</span><span>    </span><span style="color:#e9fdac;">LINEITEM </span><span>{
</span><span>        </span><span style="color:#e9fdac;">int Quantity
</span><span>    }
</span><span>{​</span><span style="color:#ff5e5e;">% </span><span style="color:#e9fdac;">end </span><span style="color:#ff5e5e;">%</span><span>​}
</span></code></pre>
<p>If you want to mention it in your blog post text,
make sure to include a zero-width space (<code>ZWSP</code> or <code>U+200B</code>) after the opening and before the closing curly braces to prevent Mermaid from rendering it.</p>
<<<<<<< HEAD
<<<<<<< HEAD
<p><img src="https://atomgit.com/deng-2022/games-zola/blog/mermaid/mermaid-in-blog-post.png" alt="How to write Mermaid digram code that is not rendered as a diagram" /></p>
=======
<p><img src="https://deng-2022.atomgit.com/games-zola/blog/mermaid/mermaid-in-blog-post.png" alt="How to write Mermaid digram code that is not rendered as a diagram" /></p>
>>>>>>> ac12026 (third commit)
=======
<p><img src="https://deng-2022.atomgit.net/games-zola/blog/mermaid/mermaid-in-blog-post.png" alt="How to write Mermaid digram code that is not rendered as a diagram" /></p>
>>>>>>> b45cb8d (four commit)

      </div>
    </article>
  </div>

  <script type="application/ld+json">
{
   "@context": "https://schema.org"
  ,"@type": "BlogPosting"
  ,"mainEntityOfPage": {
     "@type": "WebPage"
<<<<<<< HEAD
<<<<<<< HEAD
    ,"@id": "https://atomgit.com/deng-2022/games-zola/blog/mermaid/"
=======
    ,"@id": "https://deng-2022.atomgit.com/games-zola/blog/mermaid/"
>>>>>>> ac12026 (third commit)
=======
    ,"@id": "https://deng-2022.atomgit.net/games-zola/blog/mermaid/"
>>>>>>> b45cb8d (four commit)
  }
  ,"headline": "Diagrams with Mermaid"
  ,"datePublished": "2023-09-26"
  ,"dateModified": "2023-09-26"
  
  ,"author": [
    
      {
         "@type": "Person"
        ,"name": "Thomas Weitzel"
      }
      
    
  ]
  ,"publisher": [
    
      {
         "@type": "Person"
        ,"name": "Thomas Weitzel"
      }
      
    
  ]
  
  ,"description": "Discover Mermaid&#x27;s Markdown-inspired syntax to craft diverse diagrams using simple text in your blog posts. Learn how to integrate and customize Mermaid diagrams."
  ,"articleBody": "What are Mermaid diagramsMermaid is a syntax similar to Markdown where you can use text to describe and automatically generate diagrams.With Mermaid, you can generateFlow charts,UML diagrams,Pie charts,Gantt diagrams,Entity Relationship diagrams,and more.An Entity Relationship diagram example      %%{ init: {&#x27;theme&#x27;: &#x27;forest&#x27;} }%%    erDiagram    CUSTOMER ||--o{ ORDER : places    ORDER ||--|{ LINEITEM : contains    PRODUCT ||--o{ LINEITEM : is_listed_in    CUSTOMER {        string Name        string Email        string Address    }    PRODUCT {        string ProductName        float Price    }    ORDER {        date DateOrdered        string Status    }    LINEITEM {        int Quantity    }Using Mermaid in your blog postThe diagram shortcode allows you to easily embed Mermaid diagrams in your blog posts, with an option to configure its appearance.Basic UsageTo use the shortcode in your blog post, you would use the following format:{​% diagram() %​}Your Mermaid diagram code here{​% end %​}Replace Your Mermaid diagram code here with your actual Mermaid diagram code.To load the necessary JavaScript to render the Mermaid diagram, you need to enable it in the front matter of your blog post by setting the value for extra.diagram to true:+++[extra]diagram = true+++Configuring the AppearanceThe shortcode supports an optional init parameter, that allows you to specify configuration options for Mermaid,particularly changing the appearance of the diagrams through the theme.For example, to apply the forest theme:{​% diagram(init=&amp;quot;{&amp;#39;theme&amp;#39;: &amp;#39;forest&amp;#39;}&amp;quot;) %​}Your Mermaid diagram code here{​% end %​}Providing init ConfigurationWhen using the init parameter, the configuration should be a string wrapped in double quotes.Inside this string, use single quotes for keys and values.Here&#x27;s a more advanced example with multiple configuration options:{​% diagram(init=&amp;quot;{&amp;#39;theme&amp;#39;: &amp;#39;forest&amp;#39;, &amp;#39;themeVariables&amp;#39;: {&amp;#39;primaryColor&amp;#39;: &amp;#39;#FF0000&amp;#39;}}&amp;quot;) %​}Your Mermaid diagram code here{​% end %​}In this example, we&#x27;re using the forest theme and changing the primary color to red (#FF0000).Note: Ensure that you use single quotes inside the double quotes for the configuration to work correctly.Putting it all togetherUse the shortcode by enclosing your Mermaid diagram code with {​% diagram() %​} ... {+ end %}.To change the look of the Mermaid theme, provide values for the init parameter.Always enclose the init value with double quotes, and use single quotes inside the configuration string.With this shortcode in place, integrating and customizing Mermaid diagrams in your blog posts becomes a breeze!Explaining Mermaid diagram codeHere is how the diagram rendered above is embedded in this blog post as a code block.Because it is the same code as the diagram above, extra care has to be taken to prevent Mermaid from rendering it as a diagram.{​% diagram(init=&amp;quot;{&amp;#39;theme&amp;#39;: &amp;#39;forest&amp;#39;}&amp;quot;) %​}    CUSTOMER ||--o{ ORDER : places    ORDER ||--|{ LINEITEM : contains    PRODUCT ||--o{ LINEITEM : is_listed_in    CUSTOMER {        string Name        string Email        string Address    }    PRODUCT {        string ProductName        float Price    }    ORDER {        date DateOrdered        string Status    }    LINEITEM {        int Quantity    }{​% end %​}If you want to mention it in your blog post text,make sure to include a zero-width space (ZWSP or U+200B) after the opening and before the closing curly braces to prevent Mermaid from rendering it."
  
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
    ,"image": "https://atomgit.com/deng-2022/games-zola//blog/mermaid/banner.jpg"
=======
    ,"image": "https://atomgit.com/deng-2022/games-zola/blog/mermaid/banner.jpg"
>>>>>>> 88a22dfe7c2ae7ea9585d788af01d772a42c77e8
=======
    ,"image": "https://deng-2022.atomgit.com/games-zola/blog/mermaid/banner.jpg"
>>>>>>> ac12026 (third commit)
=======
    ,"image": "https://deng-2022.atomgit.net/games-zola/blog/mermaid/banner.jpg"
>>>>>>> b45cb8d (four commit)
  
}
</script>



  </div>
  <footer>
  <!-- Social Media Icons -->
  
    <ul class="mt-4 flex justify-center space-x-8">
      
        
          <li>
            <a
              
              href="https:&#x2F;&#x2F;github.com&#x2F;thomasweitzel" title="Github"
              class="text-gray-400 hover:text-gray-500">
              <span class="sr-only">github</span>
              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 1024 1024"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"/></svg>
            </a>
          </li>
        
      
        
          <li>
            <a
              
              href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;u&#x2F;188291" title="Stackoverflow"
              class="text-gray-400 hover:text-gray-500">
              <span class="sr-only">stackoverflow</span>
              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 73.099998 86.599998"><g transform="translate(-22.6,-14.9)"><path d="m 84.4,93.8 0,-23.2 7.7,0 0,30.9 -69.5,0 0,-30.9 7.7,0 0,23.2 z"/><path d="m 38.8,68.4 37.8,7.9 1.6,-7.6 -37.8,-7.9 -1.6,7.6 z m 5,-18 35,16.3 3.2,-7 -35,-16.4 -3.2,7.1 z M 53.5,33.2 83.2,57.9 88.1,52 58.4,27.3 53.5,33.2 Z m 19.2,-18.3 -6.2,4.6 23,31 6.2,-4.6 -23,-31 z M 38,86 l 38.6,0 0,-7.7 -38.6,0 0,7.7 z"/></g></svg>
            </a>
          </li>
        
      
        
          <li>
            <a
              
                rel="me"
              
              href="https:&#x2F;&#x2F;fosstodon.org&#x2F;@tweitzel" title="Mastodon"
              class="text-gray-400 hover:text-gray-500">
              <span class="sr-only">mastodon</span>
              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 18.656 20"><path d="M18.656 6.566c0-4.339-2.843-5.61-2.843-5.61C14.38.298 11.919.021 9.362 0h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.02 2.181.012 3.441.103 4.243.778 8.425 4.7 9.463 1.81.479 3.363.579 4.613.51 2.268-.126 3.54-.809 3.54-.809l-.074-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-4-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.015.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V7.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.07V7.364c0-1.28-.5-1.927-1.501-1.927-.905 0-1.357.546-1.357 1.62v5.099H3.355V6.903c0-1.074.273-1.927.823-2.558.566-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.405-1.228.92 0 1.662.324 2.228.955.549.631.822 1.484.822 2.558z"/></svg>
            </a>
          </li>
        
      
    </ul>
  
  <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 text-center">
    
      <p class="text-center text-base leading-6">
        
          
          <a href="&#x2F;pages&#x2F;privacy&#x2F;">Privacy Policy</a>
        
           &middot; 
          <a href="&#x2F;pages&#x2F;terms&#x2F;">Terms</a>
        
      </p>
    
    
    <div class="mt-4">
      <p class="text-center text-base leading-6 text-gray-400">
        Copyright 2025 by Thomas Weitzel
      </p>
    </div>
    
  </div>
</footer>

</body>
</html>
